<template>
  <!-- 教程 -->
  <a-modal
    v-model:open="visible"
    title="提示"
    @ok="handleOk"
    class="addStation"
    destroyOnClose
    :width="900"
    @cancel="cancel"
    centered
  >
    <template #footer>
      <div class="tip">
        因萤石云暂不提供分组的相关接口，为更好的管理摄像头，需要下载萤石云手机APP客户端进行手动分组和命名的操作
        <div class="tipContent">
          一、分组<br />
          在【我的家】的分组中根据设备序列号找到该摄像头，长按选择，点击下方的【转移分组】，若为无分组可创建新的分组
          <div class="imgContent">
            <img :src="teach1" class="teachImg" />
            <img :src="teach2" class="teachImg" />
          </div>
        </div>
        <div class="tipContent">
          二、修改名称<br />
          点击摄像头右下方的三个点，选择【设置】，直接修改名称即可
          <div class="imgContent">
            <img :src="teach3" class="teachImg" />
            <img :src="teach4" class="teachImg" />
            <img :src="teach5" class="teachImg" />
          </div>
        </div>
      </div>
      <div class="footerBar">
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="cancel"
          >完成</a-button
        >
      </div>
    </template>
  </a-modal>
</template>
<script setup>


import teach1 from "@/assets/teach1.png";
import teach2 from "@/assets/teach2.png";
import teach3 from "@/assets/teach3.png";
import teach4 from "@/assets/teach4.png";
import teach5 from "@/assets/teach5.png";
const $api = inject("$api");
const props = defineProps({
  teachVisible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
});
const loading = ref(false);
const visible = ref(props.teachVisible);
const emits = defineEmits(["update:teachVisible", "getSupplierPage"]);
watch(
  () => props.teachVisible,
  (val) => {
    visible.value = val;
  }
);

const cancel = () => {
  emits("update:teachVisible", false);
};
</script>

<style lang="less" scoped>
.footerBar {
  text-align: center;
  margin-top: 30px;
}
.tip {
  text-align: left;
}
.tipContent {
  margin-top: 20px;
}
.teachImg {
  width: 250px;
}
.imgContent{
  margin-top: 12px;
  display: flex;
  justify-content: space-around;
}
</style>